$color-default: #008cee;
$color-danger: #FF4949;
$color-success: #13CE66;
$color-warning: #F7BA2A;
$color-error: #ff6600;
$color-blue: #0000FF;
$color-yellow: #fff100;

.GykjMap-clear {
  display: block;
  content: "";
  clear: both;
}

.GykjMap-pull-left {
  float: left;
}

.GykjMap-pull-right {
  float: right;
}

.GykjMap-info {
  transform: translate3D(-50%, -100%, 0);
  white-space: nowrap;
  position: relative;
  .GykjMap-info-wrapper {
    border-radius: 5px;
    background-color: rgba(255, 255, 255, .9);
    box-shadow: 1px 1px 1px 1px #ccc;
    padding: 5px;
  }
  .GykjMap-info-blue {
    color: $color-blue;
  }
  .GykjMap-info-red {
    color: $color-danger;
  }
  .GykjMap-waterLevel-img {
    width: 14px;
    margin-top: 2px;
  }
  .GykjMap-info-boxTail {
    text-align: center;
  }
}

.GykjMap-weatherWarning {
  .GykjMap-weatherWarning-wrapper {
    display: flex;
    align-items: center;
    > img {
      width: 40px;
      margin-right: 5px;
    }
  }
}

.GykjMap-typhoon-ringCenter {
  width: 35px;
  height: 35px;
  background-image: url(../img/typhoonstatic.png);
  transform: translate3D(-50%, -50%, 0);
  transform-origin: center center;
  animation: ringCenterAnimate 1s linear infinite;
  z-index: 1;
}
@keyframes ringCenterAnimate {
  from {
    transform: translate3D(-50%, -50%, 0) rotate(0deg);
  }
  to {
    transform: translate3D(-50%, -50%, 0) rotate(360deg);
  }
}
.GykjMap-typhoonInfo {
  transform: translate3D(-50%, -100%, 0);
  white-space: nowrap;
  position: absolute;
  user-select: none;
  z-index: 2;
  > .warpper {
    border-radius: 5px;
    padding: 10px;
    padding-top: 5px;
    background-color: rgba(26, 54, 126, 0.6);
    color: rgb(214, 233, 255);
    > .header {
      width: 100%;
      height: 25px;
      display: flex;
      align-items: center;
      overflow: hidden;
      border-bottom: 1px solid rgb(160, 160, 160);
      font-size: 14px;
      > .title {
        flex: 1;
        color: $color-yellow;
      }
      .GykjMap-typhoonInfo-close {
        color: white;
        font-size: 20px;
        cursor: pointer;
        margin-top: -6px;
        &:hover {
          color: lightgray;
        }
      }
    }
    > .content {
      padding-top: 5px;
      > .detail {
        color: white;
      }
    }
  }
  > .tail {
    margin-top: -8px;
    text-align: center;
    color: rgba(26, 54, 126, 0.6);
  }
}

.GykjMap-waterLevel,
.GykjMap-hydrology,
.GykjMap-tideGauge,
.GykjMap-reservoir,
.GykjMap-waterLoggingCity {
  .GykjMap-waterLevel-warnImg,
  .GykjMap-hydrology-warnImg,
  .GykjMap-tideGauge-warnImg,
  .GykjMap-reservoir-warnImg,
  .GykjMap-waterLoggingCity-warnImg {
    width: 12px;
    vertical-align: middle;
    margin-top: -3px;
  }
}
.pad-10 {
  .aPicture-map-infoOverLayer-warpper {
    padding: 10px;
  }
}
.search-overLayer,
.typhoon-ringTip,
.typhoon-baseTip {
  display: none;
}
.searchSpaceType-overLayer {
  width: 300px;
  .searchSpaceType-detail {
    margin-right: 10px;
    margin-bottom: 5px;
  }
}
.typhoon-ringCenter {
  width: 35px;
  height: 35px;
  // background-image: url(./img/typhoonstatic.png);
  transform: translate3D(-50%, -50%, 0);
  transform-origin: center center;
  animation: ringCenterAnimate 1s linear infinite;
  z-index: 1;
}
@keyframes ringCenterAnimate {
  from {
    transform: translate3D(-50%, -50%, 0) rotate(0deg);
  }
  to {
    transform: translate3D(-50%, -50%, 0) rotate(360deg);
  }
}
.aPicture-map-typhoonInfo {
  transform: translate3D(-50%, -100%, 0);
  white-space: nowrap;
  position: absolute;
  user-select: none;
  z-index: 2;
  > .warpper {
    border-radius: 5px;
    padding: 10px;
    padding-top: 5px;
    background-color: rgba(255, 255, 255, .9);
    box-shadow: 1px 1px 1px 1px #ccc;
    color: black;
    > .header {
      width: 100%;
      height: 25px;
      display: flex;
      align-items: center;
      overflow: hidden;
      border-bottom: 1px solid gray;
      font-size: 14px;
      > .title {
          flex: 1;
          color: $color-danger;
      }
      .typhoonInfo-close {
          color: black;
          font-size: 20px;
          cursor: pointer;
          &:hover {
              color: gray;
          }
      }
    }
    > .content {
      padding-top: 5px;
      > .detail {
        color: $color-blue;
      }
    }
  }
  > .tail {
    margin-top: -7px;
    text-align: center;
    color: rgba(255, 255, 255, .9);
  }
}
